<template>
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="80px" class="demo-dynamic">
        <el-row>
            <el-col :span="6">
                <el-form-item label="日期" prop="date" :rules="{required: true, message: '请输入交接日期', trigger:'blur'}">
                    <el-date-picker
                        type="date"
                        v-model="dynamicValidateForm.date"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择交接日期"
                        size="small"
                    ></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="人员" prop="user_id" :rules="{required: true, message: '请选择一个人员', trigger:'blur'}">
                    <el-select v-model="dynamicValidateForm.user_id" placeholder="请选择人员" filterable size="small">
                        <el-option v-for="user in storeUserList" :key="user.id" :label="user.name" :value="user.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="班次" prop="shift" :rules="{required: true, message: '请选择一个班次', trigger:'blur'}">
                    <el-select v-model="dynamicValidateForm.shift" placeholder="请选择班次" filterable size="small">
                        <el-option label="早班" :value="1"></el-option>
                        <el-option label="晚班" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="温度" prop="temperature" :rules="{required: true, message: '请输入机房温度', trigger:'blur'}">
                    <el-input-number
                        v-model="dynamicValidateForm.temperature"
                        controls-position="right"
                        :min="-50"
                        :max="100"
                        :step="0.5"
                        :precision="1"
                        size="small"
                    ></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="湿度" prop="humidity" :rules="{required: true, message: '请输入机房湿度', trigger:'blur'}">
                    <el-input-number v-model="dynamicValidateForm.humidity" controls-position="right" :min="1" :max="100" size="small"></el-input-number>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-for="(content, index) in dynamicValidateForm.Contents" :key="content.key">
            <el-col :span="20">
                <el-form-item
                    :label="'交接' + (index+1)"
                    :key="content.key"
                    :prop="'Contents.' + index + '.content'"
                    :rules="{required: true, message: '交接不能为空', trigger: 'blur'}"
                >
                    <el-input v-model.trim="content.content"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-button @click.prevent="removeDomain(index, content)" type="danger" icon="el-icon-minus" size="small">删除</el-button>
            </el-col>
        </el-row>
        <el-row v-if="dynamicValidateForm.shift === 2">
            <el-col :span="6">
                <el-form-item label="日结开始" prop="nr_begin">
                    <el-time-picker v-model="dynamicValidateForm.nr_begin" value-format="HH:mm:ss" placeholder="日结开始"></el-time-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="日结结束" prop="nr_end">
                    <el-time-picker v-model="dynamicValidateForm.nr_end" value-format="HH:mm:ss" placeholder="日结结束"></el-time-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <el-button @click="addDomain" type="success" icon="el-icon-plus">添加交接</el-button>
            <el-button @click="submitForm('dynamicValidateForm')" type="primary">保存</el-button>
            <el-button @click="$router.push({name: 'handover'})" type="warning">返回</el-button>
            <!--<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>-->
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    props: {
        id: null
    },
    data() {
        return {
            dynamicValidateForm: {
                Contents: [
                    {
                        id: null,
                        content: ''
                    }
                ],
                date: new Date(),
                user_id: null,
                shift: 1,
                temperature: 22.0,
                humidity: 20,
                nr_begin: null,
                nr_end: null
            },
            storeUserList: []
        }
    },
    async created() {
        const response = await this.$http.get('/storeUserList')
        if (response && response.code === 0) {
            this.storeUserList = response.returnObject || []
            this.dynamicValidateForm.user_id = this.storeUserList.find(item => item.name === this.$store.getters.user.name).id
        }
        this.id ? this.fetch() : (this.dynamicValidateForm.shift = new Date().getHours() > 15 ? 2 : 1)
    },
    methods: {
        async fetch() {
            const response = await this.$http.get(`/handover/${this.id}`)
            if (response && response.code === 0) {
                Object.assign(this.dynamicValidateForm, response.returnObject)
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate(async valid => {
                if (!valid) return false
                if (this.id) {
                    const response = await this.$http.put(`/handover/${this.id}`, this.dynamicValidateForm)
                    if (response && response.code === 0) {
                        this.$message.success('修改成功')
                        this.$router.push({ name: 'handover' })
                    }
                } else {
                    const response = await this.$http.post('/handover', this.dynamicValidateForm)
                    if (response && response.code === 0) {
                        this.$message.success('保存成功')
                        this.$router.push({ name: 'handover' })
                    }
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        removeDomain(index, item) {
            this.$confirm(`删除:第 ${index + 1} 条交接, 删除后不可恢复, 是否继续?`, '警报', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    if (this.dynamicValidateForm.Contents.length > 1) {
                        if (item.id) {
                            const response = await this.$http.delete(`/content/${item.id}`)
                            if (response && response.code === 0) {
                                this.dynamicValidateForm.Contents.splice(index, 1)
                            }
                        } else {
                            this.dynamicValidateForm.Contents.splice(index, 1)
                        }
                    } else {
                        this.$message.error('至少要有一条交接，交接记录不能为空')
                    }
                })
                .catch(() => {})
        },
        addDomain() {
            this.dynamicValidateForm.Contents.push({
                id: null,
                content: '',
                key: Date.now()
            })
        }
    }
}
</script>

<style scoped>
</style>
